<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mimall</title>
<style type="text/css">
/* 去除默认的样式 */
*{margin:0;padding: 0}
a{text-decoration: none;}
div.nav_container{width:100%;height:50px;box-shadow: 0 5px 5px rgba(0,0,0,.07);background: pink;}
div.nav_container ul.nav{/* width: 95%; */height: 100%;margin:0 2.5%;background: url(${pageContext.request.contextPath}/imgs/logo.png);
background-repeat: no-repeat;background-position: left center;padding-left: 130px;background-size: 135px 58px;}
ul.nav li{list-style: none;float: left;font-size: 20px;line-height: 50px;margin: 0 5px;}
ul.nav li a{color: white;font-size: 17px;}
</style>
</head>
<body>
<div class="nav_container" id="nav">
<ul class="nav">
	<li><a href="${pageContext.request.contextPath}/goodsList.do">首页</a></li>
	<li><a href="${pageContext.request.contextPath}/aboutUs.do">关于我们</a></li>
	<li><a href="${pageContext.request.contextPath}/shoppingCart.do">我的购物车</a></li>
	<li><a href="#">我的订单</a></li>
	<li><a href="${pageContext.request.contextPath}/userpage.do">我的主页</a></li>
	<!-- 登录和没有登录是两种情况 -->
	<c:choose>
		<c:when test="${empty uid }">
			<li style="float: right;"><a href="${pageContext.request.contextPath}/loginPage.do">登录</a></li>
		</c:when>
		<c:otherwise>
		    <li style="float: right;"><a href="${pageContext.request.contextPath}/logOut.do">注销登录</a></li>
		    <li style="float:right;"><a href="#">当前账号：<strong>${uid }</strong></a></li>                           
		</c:otherwise>
	</c:choose>
</ul>

</div>
	<script type="text/javascript">
		window.onload = function() {
			// 吸顶灯效果// 找到网页中的导航栏
			var nav = document.getElementById("nav");
			//计算导航栏到浏览器顶部距离
			var navTop = nav.offsetTop;
			window.onscroll = function() {
				//计算滚动条距离浏览器顶部距离
				var backTop = document.documentElement.scrollTop
						|| document.body.scrollTop;
				//吸顶灯效果
				if (backTop >= navTop) {
					console.log(backTop - navTop);
					//设置固定定位
					nav.style.position = "fixed";
					nav.style.top = "0";
					nav.style.lsft = "0";
					nav.style.zIndex = "100";
				} else {
					//清空固定定位
					nav.style.position = "";
				}
			}
		}
	</script>
</body>
</html>